<template>
  <div>
    <div v-if="fade" class="wrap" @mouseenter="stopImg" @mouseleave="playImgFade" >
      <ul class="imgWrapFade">
        <li v-for="(imgItem, index) in copyImg" :key="index" :class="'item' + index">
          <img :src="imgItem" :alt='index'>
        </li>
      </ul>
      <div class="buttonIcon" @click="gotoImgFade(current - 1)">&lt;</div>
      <div class="buttonIcon right" @click="gotoImgFade(current + 1)">&gt;</div>
      <ul class="circle">
        <li @click="gotoImgFade(index)" v-for="(imgItem, index) in img" :key="index" :class="current % img.length === index ? 'active' : ''"></li>
      </ul>
    </div>
    <div v-else class="wrap" @mouseenter="stopImg" @mouseleave="playImg">
      <ul class="imgWrap" :class="direction === 'horiz' ? 'horizontal' : ''" >
        <li v-for="(imgItem, index) in copyImg" :key="index">
          <img :src="imgItem" :alt='index' class="item">
        </li>
      </ul>
      <div :class="direction === 'horiz' ? 'buttonIcon' : 'buttonIconVer'" @click="gotoImg(current - 1)">{{direction === 'horiz' ? '&lt;' : '↑'}}</div>
      <div :class="[direction === 'horiz' ? 'buttonIcon right' : 'buttonIconVer rightVer']" @click="gotoImg(current + 1)">{{direction === 'horiz' ? '&gt;' : '↓'}}</div>
      <ul :class="direction === 'horiz' ? 'circle' : 'circleVer'">
        <li @click="gotoImg(index)" v-for="(imgItem, index) in img" :key="index" :class="current % img.length === index ? 'active' : ''"></li>
      </ul>
    </div>
  </div>

</template>

<script>
import img0 from '@/assets/img/0.jpg'
import img1 from '@/assets/img/1.jpg'
import img2 from '@/assets/img/2.jpg'
import img3 from '@/assets/img/3.jpg'
import img4 from '@/assets/img/4.jpg'
import anime from 'animejs'
export default {
  name: 'carousel',
  data () {
    return {
      // direction: 'horiz',
      // direction: 'vertical',
      img: [img0, img1, img2, img3, img4],
      copyImg: [],
      timer: null,
      current: 0, // 当前序号
      animeObj: null
    }
  },
  props: {
    fade: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'horiz'
    },
    autoPlay: {
      type: Boolean,
      default: true
    }
  },
  created () {
    this.copyImg = this.img.concat(this.img)
  },
  mounted () {
    if (this.autoPlay) {
      if (this.fade) {
        this.initFade()
      } else {
        this.init()
      }
    }
  },
  methods: {
    initFade () {
      this.changeFade(this.current)
      this.timer = setInterval(() => {
        this.current++
        this.changeFade(this.current)
      }, 4000)
    },
    changeFade (index) {
      const cIndex = index % this.img.length
      this.animeObj = anime.timeline({
        easing: 'easeInOutQuad',
        duration: 500
      })
        .add({
          targets: '.imgWrapFade li',
          opacity: 0
        })
        .add({
          targets: '.imgWrapFade .item' + cIndex,
          opacity: 1
        })
    },
    init () {
      this.translateImg(this.current)
      this.timer = setInterval(() => {
        this.current++
        if (this.current > this.img.length) {
          this.current = 0
          this.translateImg(this.current, 0)
          this.current++
          this.translateImg(this.current)
        } else {
          this.translateImg(this.current)
        }
      }, 5000)
    },
    translateImg (index, duration = 3000) {
      if (this.direction === 'horiz') {
        this.animeObj = anime({
          targets: '.imgWrap',
          duration: duration,
          easing: 'easeInOutQuad',
          translateX: -800 * index
        })
      } else {
        this.animeObj = anime({
          targets: '.imgWrap',
          duration: duration,
          easing: 'easeInOutQuad',
          translateY: -534 * index
        })
      }
    },
    stopImg () {
      clearInterval(this.timer)
    },
    playImg () {
      if (this.autoPlay) this.init()
    },
    playImgFade () {
      if (this.autoPlay) {
        setTimeout(() => {
          this.current++
          this.initFade()
        }, 2000)
      }
    },
    gotoImgFade (index) {
      this.current = index
      this.changeFade(index)
    },
    gotoImg (index) {
      this.current = index
      this.translateImg(index)
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
  .wrap{
    position: relative;
    width: 800px;
    height: 534px;
    margin: 0 auto;
    overflow: hidden;
    .imgWrapFade {
      li{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        &:first-of-type{
          opacity: 1;
        }
      }
    }
    .imgWrap{
    }
    .horizontal{
      display: flex;
      /*justify-content: left;*/
    }
    .buttonIcon{
      position: absolute;
      top: 50%;
      width: 50px;
      height: 50px;
      line-height: 50px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      font-size: 50px;
      color: #e5e5e5;
    }
    .right{
      right: 0;
    }
    .buttonIconVer{
      position: absolute;
      top: 0;
      left: 50%;
      width: 50px;
      height: 50px;
      line-height: 50px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      font-size: 50px;
      color: #e5e5e5;
    }
    .rightVer{
      top: calc(100% - 50px);
    }
    .circle{
      position: absolute;
      top: 80%;
      left: 40%;
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      li{
        width: 15px;
        height: 15px;
        background: #999999;
        border-radius: 50%;
      }
      .active{
        width: 25px;
        height: 25px;
        background: aqua;
        transform: translateY(-5px);
      }
    }
    .circleVer{
      position: absolute;
      top: 20%;
      right: 5%;
      width: 50px;
      height: 300px;
      li{
        width: 15px;
        height: 15px;
        background: #999999;
        border-radius: 50%;
        margin-bottom: 30px;
      }
      .active{
        width: 25px;
        height: 25px;
        background: aqua;
        transform: translateX(-5px);
      }
    }
  }
</style>
